/*
 * @Author: restart 2425792130@qq.com
 * @Date: 2024-07-23 16:43:48
 * @LastEditors: restart 2425792130@qq.com
 * @LastEditTime: 2024-07-24 14:06:05
 * @FilePath: \geek-pc\src\pages\list\index.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Card,Breadcrumb,Button ,Radio,Form,Select,DatePicker,Table } from 'antd';
import { Link,useNavigate } from 'react-router-dom'
import { useEffect, useState } from 'react'
import './index.scss'
import {http} from '../../utils'

const List = () => {
const { Option } = Select;
const { RangePicker } = DatePicker
const [channels, setChannels] = useState([])
useEffect(() => {
    async function fetchChannels() {
      const res = await http.get('/channels')
      setChannels(res.data.channels)
    }
    fetchChannels()
}, [])
// 参数管理
const [params, setParams] = useState({
    page: 1,
    per_page: 10
  })
    const onFinish = () =>{
        console.log('打印测试')
    }
    // const pageChange = (page) => {
    //     // 拿到当前页参数 修改params 引起接口更新
    //     setParams({
    //       ...params,
    //       page
    //     })
    //   }
    return (
        <>
        <Card
          title={
              <Breadcrumb
               items={[
                 {
                   title: <Link to="/">首页</Link>,
                 },
                 {
                   title: '列表测试',
                 },
               ]}
              />
          }
          className='cards'
        >
    <Form initialValues={{ status: null }} onFinish={onFinish}>
    <Form.Item label="状态" name="status">
      <Radio.Group>
      <Radio value={null}>全部</Radio>
        <Radio value={0}>草稿</Radio>
        <Radio value={1}>待审核</Radio>
        <Radio value={2}>审核通过</Radio>
        <Radio value={3}>审核失败</Radio>
      </Radio.Group>
    </Form.Item>

    <Form.Item label="频道" name="channel_id">
      <Select placeholder="请选择文章频道" style={{ width: 290 }}>
      {channels.map(item => (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>
              ))}
      </Select>
    </Form.Item>
    <Form.Item label="日期" name="date">
      <RangePicker />
    </Form.Item>
    <Form.Item>
      <Button type="primary" htmlType="submit">
        筛选
      </Button>
    </Form.Item>
  </Form>
  </Card>
  {/* 列表区域 */}
  </>
)
}

export default List